<template>
    <scroll-view @refresherrefresh="refresherpulling" :refresher-triggered="enabled" refresher-enabled class="scroll-view" scroll-y="true" @scrolltolower="scrolltolower">
        <view class="wai">
            <!-- 渐变色 -->
            <view class="positioning"></view>
            <view class="top-lie">
                <view :class="{ active: activeIndex == 0 }" class="top1" @click="switchTab(0)">
                    <view class="">全部</view>
                    <view class="border" v-show="activeIndex == 0"></view>
                </view>
                <view :class="{ active: activeIndex == 1 }" class="top1" @click="switchTab(1)">
                    <view class="">已支付</view>
                    <view class="border" v-show="activeIndex == 1"></view>
                </view>
                <view :class="{ active: activeIndex == 2 }" class="top1" @click="switchTab(2)">
                    <view class="">待支付</view>
                    <view class="border" v-show="activeIndex == 2"></view>
                </view>
                <view :class="{ active: activeIndex == 3 }" class="top1" @click="switchTab(3)">
                    <view class="">已核销</view>
                    <view class="border" v-show="activeIndex == 3"></view>
                </view>
            </view>
            <allpayment1 @getcode="getcode" :pages="pages" v-if="activeIndex == 0"></allpayment1>
            <daipayment1 :pages="pages" v-if="activeIndex == 2"></daipayment1>
            <yipayment1 :pages="pages" v-if="activeIndex == 1"></yipayment1>
            <yihexiao :pages="pages" v-if="activeIndex == 3"></yihexiao>
        </view>
    </scroll-view>
</template>

<script setup>
import daipayment1 from '@/pages/sub/components/daipayment1.vue';
import yipayment1 from '@/pages/sub/components/yipayment1.vue';
import yihexiao from '@/pages/sub/components/yihexiao.vue';
import allpayment1 from '@/pages/sub/components/allpayment1.vue';
import { ref, watch, computed } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
const activeIndex = ref(0); //0全部，1已支付 2待支付 3已核销
const pages = ref(1); //当前页
const enabled = ref(false); //控制下拉刷新
onLoad((options) => {
    // 跳转过来接收参数判断是哪个状态
    if (options.activeIndex) {
        activeIndex.value = options.activeIndex;
    }
});

onShow(() => {
    // activeIndex.value = 0;
});

// 下拉刷新
const refresherpulling = async () => {
    enabled.value = true;
    const aceice = activeIndex.value;
    activeIndex.value = 4;
    setTimeout(() => {
        enabled.value = false;
        activeIndex.value = aceice;
    }, 500);
};
const switchTab = (value) => {
    activeIndex.value = value;
};
// 如果全部订单的列表小于5，加载下一页
const getcode = async () => {
    pages.value++;
};
const scrolltolower = () => {
    console.log('滚动到底部加载下一页');
    pages.value++;
};
// 监听顶部是否变化如果变化把page改为1
watch(
    activeIndex,
    (newProps, oldProps) => {
        pages.value = 1;
    },
    { immediate: false, deep: false }
);
</script>

<style lang="scss" scoped>
.scroll-view {
    height: 100vh;
}
.wai {
    .top-lie {
        .top1 {
            z-index: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            .border {
                width: 38rpx;
                height: 6rpx;
                background: #f8bb4f;
                margin-top: 6rpx;
            }
        }
        // 动态样式
        .active {
            color: #f8bb4f;
        }
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 14rpx;
        margin-bottom: 44rpx;
    }
    .positioning {
        height: 282rpx;
        background: linear-gradient(to bottom, #ffe8be, #f3f3f3);
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }
    min-height: 100vh;
    background-color: #f3f3f3;
    padding: 0 24rpx 100rpx 24rpx;
}
</style>
